<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <style>
        body {
            background: #000;
            color: #fff;
            text-align: center;
        }
        div {
            margin: 10px;
        }
    </style>
    <body>
        <div>
            <h3>Pick An Emoji</h3>
        </div>
        <div class="main" style="text-align: center" >
            <canvas id="mainCanvas" width="160" height="1600"></canvas>
        </div>
    </body>

    <script type="text/javascript">
        var ResponseJson;
        var EMOJISLIST;
        var COLORLIST;
        window.onload=function() {
            getData();
        }

        function getData() {
            var xhttp = new XMLHttpRequest();
            xhttp.onreadystatechange = function() {
                if (this.readyState == 4 && this.status == 200) {
                    var data = this.responseText;
                    var ResponseJson = JSON.parse(data);
                    var str = JSON.stringify(ResponseJson);
                    EMOJISLIST = ResponseJson.AllEmojis;
                    COLORLIST = ResponseJson.colorList;
                    let a = new drawPic(canvas, ResponseJson.colorList, ResponseJson.AllEmojis);

                }
            };
            xhttp.open("GET", "EmojiData.json", true);
            xhttp.send();
        }

        function drawPic(canvas, colorList, emojisList){
            this.canvas = canvas;
            this.emojisList = emojisList;
            this.colorlist = colorList;
            this.cvs = canvas.getContext("2d");
            this.boxNum = 10;
            this.bgWidthLength = 0;
            this.bgHeightLength = 0;
            this.clickedArr = [];
            this.start();
            return this;
        }
        drawPic.prototype.start = function (){
            this.bgWidthLength = parseInt( this.canvas.width / this.boxSize )
            this.bgHeightLength = parseInt( this.canvas.height / this.boxSize )
            this.drawEmojis()
        }

        drawPic.prototype.drawEmojis = function(){
            for (let i = 0; i < this.emojisList.length; i ++){
                var imgData=this.cvs.createImageData(8,8);
                for (let j = 0; j < 64; j ++){
                    var colorIndex = this.strToint(this.emojisList[i][j]);
                    RGB = this.colorlist[colorIndex];
                    imgData.data[4 * j] = eval(RGB.slice(0, 3));
                    imgData.data[4 * j + 1] = eval(RGB.slice(3, 6));
                    imgData.data[4 * j + 2] = eval(RGB.slice(6));
                    imgData.data[4 * j + 3] = 255;
                }
                var cooX = parseInt(i / this.boxNum);
                var cooY = i % this.boxNum;
                this.cvs.putImageData(imgData,cooX*16,cooY*16);
            }
        }

        drawPic.prototype.drawBgBox = function(x,y,z) {
            this.cvs.beginPath()
            this.cvs.fillStyle = this.colorlist[z];
            this.cvs.fillRect(x+1, y+1, this.boxSize-1,this.boxSize-1);
            this.cvs.fill()
            this.cvs.stroke()
            this.cvs.closePath()
        }

        drawPic.prototype.strToint = function (x) {
            if (x === 'a') return 10;
            else if (x === 'b') return 11;
            else if (x === 'c') return 12;
            else if (x === 'd') return 13;
            else if (x === 'e') return 14;
            else if (x === 'f') return 15;
            else return eval(x);
        }

        drawPic.prototype.pickEmoji = function (){
            let move = this.mousemove.bind(this)
        }
        let canvas = document.getElementById("mainCanvas");
        let cvs = canvas.getContext("2d");

        canvas.onmousedown = function (ev){
            let clickedX = ev.offsetX;
            let clickedY = ev.offsetY;
            var indexY = parseInt(clickedX / 8);
            var indexX = parseInt(clickedY / 8);
            if (indexX%2 === 0 && indexY%2 === 0){
                var listIndex = 10 * indexY/2 + indexX/2;
                sendLEDmess(listIndex);
            }

        }
        function sendLEDmess(index){
            var mess = EMOJISLIST[index]
            var xhttp = new XMLHttpRequest();
            xhttp.onreadystatechange = function() {
                if (this.readyState == 4 && this.status == 200) {
                    // document.getElementById("LEDState").innerHTML = this.responseText;
                    console.log("ok");
                }
            };
            xhttp.open("GET", "changeLED?LEDmess="+mess, true);
            xhttp.send();
        }

    </script>
</html>
